<template>
  <md-nav-bar title="兑换商城" />
  <div class="container">
    <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :safearea="true" bottom="80px">
      <view class="list-wrap" v-for="item in data.list" :key="item.id">
        <image class="image" :src="item.goodsImg" />
        <view class="content">
          <view class="title ellipsis-1">{{ item.goodsName }}</view>
        </view>
        <view class="btn">立即兑换</view>
      </view>
    </mescroll-body>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
// 接口
import { goodsList } from '@/api';

const data = reactive<any>({
  id: -1,
  list: [],
});

/**
 * 接口相关
 */

// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
const upCallback = async (mescroll: any) => {
  try {
    let res = await goodsList({ page: mescroll.num, limit: mescroll.size, coupon_id: data.id });
    const curPageData = res?.data?.data || []; // 当前页数据
    if (mescroll.num == 1) data.list = []; // 第一页需手动制空列表
    data.list = data.list.concat(curPageData); //追加新数据
    mescroll.endByPage(curPageData.length, res?.data?.total);
  } catch (e) {
    //TODO handle the exception
    mescroll.endErr(); // 请求失败, 结束加载
  }
};

onLoad(option => {
  data.id = option?.id;
});
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  box-sizing: border-box;
  .list-wrap {
    width: 100%;
    height: 168rpx;
    display: flex;
    align-items: center;
    background: white;
    margin-bottom: 20rpx;
    padding: 15rpx 20rpx 15rpx 15rpx;
    box-sizing: border-box;
    .image {
      width: 140rpx;
      height: 140rpx;
      border-radius: 20rpx;
      overflow: hidden;
    }
    .content {
      padding: 22rpx;
      box-sizing: border-box;
      flex: 1;
      .title {
        font-weight: bold;
        font-size: 34rpx;
      }
    }
    .btn {
      width: 150rpx;
      height: 50rpx;
      line-height: 50rpx;
      font-weight: 500;
      font-size: 28rpx;
      color: #ffffff;
      text-align: center;
      background: #d92121;
      border-radius: 25rpx;
    }
  }
}
</style>
